<template>
  <div class="bigbox">
    <div class="userbox">
      <div class="title">
        <router-link to="/login">登录</router-link>
        <span>·</span>
        <router-link to="/register">注册</router-link>
      </div>
      <!-- 以下是element-ui表单
        model:数据模型 == 状态值(data),
        rules:定义的规则数组[]
      -->

      <el-form
        :model="formdata"
        :rules="rules"
        ref="formdata"
        label-width="0"
        class="demo-ruleForm"
      >
        <!-- 删除了label属性,将单行文本框宽度占满一行 -->
        <el-form-item prop="regname">
          <el-input
            prefix-icon="el-icon-user"
            v-model="formdata.regname"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>

        <el-form-item prop="regpwd">
          <el-input
            prefix-icon="el-icon-lock"
            v-model="formdata.regpwd"
            placeholder="请输入密码"
            show-password
          ></el-input>
        </el-form-item>

        <el-form-item prop="regpwd2">
          <el-input
            prefix-icon="el-icon-lock"
            v-model="formdata.regpwd2"
            placeholder="请输入确认密码"
            show-password
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            type="success"
            @click="submitForm('formdata')"
            class="reg-btn"
            >注册</el-button
          >
          <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// import axios from "axios";
// 引入封装好的接口
import { register } from "@/api/admin.js";
export default {
  data() {
    // 自定义校验规则 验证两次密码是否一致
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.formdata.regpwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      // 注意：作为表单提交的数据 这个名字作为表单提交的参数名 必须和接口一致
      formdata: {
        regname: "",
        regpwd: "",
        regpwd2: "",
      },
      // 表单提交的验证规则
      rules: {
        regname: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "用户名长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],
        regpwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern: /^[a-zA-Z\d]{6,12}$/,
            message: "密码长度在6-12个字符",
            trigger: "blur",
          },
        ],

        // 验证两次输入密码是否一致
        regpwd2: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          {
            validator: validatePass2,
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      // 使用ref的引用名称
      // valid:表示满足以上所有验证规则与否
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert("submit!");
          // 1.获取注册的用户名和密码
          console.log(this.formdata.regname);
          console.log(this.formdata.regpwd);
          // 2.根据接口发送到服务器
          // axios
          //   .post("http://localhost:8080/elemrg/admin/register", {
          //     regname: this.formdata.regname,
          //     regpwd: this.formdata.regpwd,
          //   })
          let data ={
            regname: this.formdata.regname,
            regpwd: this.formdata.regpwd,
          }
          register(data)
            .then((res) => {
              console.log(res);
              // 如果注册成功，服务器返回(code:0 msg:"注册成功")
              if (res.data.code === 0) {
                // alert("注册成功")
                this.$message({
                  message: "注册成功",
                  type: "success",
                });
                // 注册成功后跳转到登录页面
                this.$router.push("/login");
              } else if (res.data.code === -1) {
                this.$message({
                  message: "用户名已存在",
                  type: "warning",
                });
              } else {
                this.$message.error("注册失败");
              }
            })
            .catch((err) => {
              console.error(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped lang="scss">
// 表示router-link被激活之后的样式
.router-link-active {
  font-weight: bold;
  color: orangered;
  border-bottom: 2px solid orangered;
}
.reg-btn {
  width: 100%;
}
.el-input {
  margin-bottom: 30px;
}

.bigbox {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url("https://img0.baidu.com/it/u=3396586749,1891687663&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500")
    no-repeat;
  background-size: cover;

  .userbox {
    width: 400px;
    min-height: 300px;
    background: #fff;
    border-radius: 10px;
    margin: 150px 550px;
    padding: 20px 30px;

    .title {
      text-align: center;
      margin-bottom: 40px;
      a {
        font-size: 20px;
        margin: 0px 15px;
        padding-bottom: 10px;
      }
    }
  }
}
</style>